javascriptのテストのはなし：QUnit

#QUnit

ともだつばさ

2012.03.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。ともだです。

今回からはjavascriptのテストネタでいこうと思います。まずは単体テストツールのQUnitについてです。
QUnitはその名から想像される通りで、xUnit系のフレームワークです。javascript用のxUnitフレームワークだと他にはJsUnitが有名ですね。
QUnitはjQuery用のテスティングフレームワークで、そこから派生してトップレベルのプロジェクトになったものです。jQueryを使ってるプロジェクトなら導入しやすいと思います。

という事で早速使ってみます。

■まず基本

jQueryのライブラリの他にQUnitのライブラリを読み込みます。
CDNはhttp://code.jquery.com/qunit/git/qunit.jsですが、いちいちリクエストを飛ばすのもなんなのでファイルをローカルに置いておいた方が良いかと思います。
次に、htmlのbodyに下記のdivを用意しておきます。

<h1 id="qunit-header">Test</h1>
<h2 id="toc-1" id="qunit-banner"></h2>
<h2 id="toc-2" id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>

テストが終わったらQUnitはこのタグにテスト結果を生成します。あとは、scriptタグの中にテストコードを書いていくだけです。

■アサーション

使えるアサーションは次の様になっています。

メソッド	説明
ok( state, message )	Booleanの判定です。JUnitだとassertTrueに相当します
equal( actual, expected, message )	値比較です。JUnitのassertEqualsに相当します
notEqual( actual, expected, message )	JUnitのassertNotEqualsに相当します
deepEqual( actual, expected, message )	オブジェクトや配列の中を再帰的にチェックしてくれます
notDeepEqual( actual, expected, message )	deepEqualの反対で等価じゃない事をチェックします
strictEqual( actual, expected, message )	===で比較してくれます
notStrictEqual( actual, expected, message )	strictEqualの反対!==でチェックします
raises( block, expected, message )	Errorが発生したかどうかをチェックします

■テストを記述する

その前にテスト対象のクラスとしてHogeを作っておきます。

var Hoge = function(){};
Hoge.prototype.add = function(param1, param2){
	return param1 + param2;
};
Hoge.prototype.package = function(param1, param2){
	return {p1:param1, p2:param2}
};
Hoge.prototype.throwError = function(){
	throw new Error();
};

テストを記述するにはtest("テスト名", function(){/*テスト*/})を使います。
addをテストするならこんな感じです。equalのアサーションを使ってみます。

test("equal", function(){
	var hoge = new Hoge();
	equal(hoge.add(1,2), 3);
});

Objectの比較をしてみます。

test("deepEqual stricEqual", function(){
	var hoge = new Hoge();
	var obj = hoge.package("test1","test2")
	deepEqual(obj, {p1:"test1", p2:"test2"}); //Objectの再帰的な比較
	
	var copiedObj = obj;
	strictEqual(obj, copiedObj); //そのものかどうかの比較
});

最後にエラーがスローされたかチェックします。

test("raises", function(){
	var hoge = new Hoge();

	raises(hoge.throwError, Error);
});

■実行する

実行するにはこれらのテストを記述したhtmlをブラウザで開くだけです。まずは上の記述を少し変えてNGになる様にしてみます。実際に開いてみるとこんな感じで表示されます。NGの理由が親切だったり、そうじゃなかったりですが、使うには問題なさそうです。

元の記述に変えてOKになる様にしてみます。

オールグリーンになりました。
ちなみに各テストの右横にある「Return」というリンクを押すと、そのテストだけフィルターされて表示されます。戻るにはブラウザの戻るボタンを押すしかない様です。

という事で今回はここまでです。最後に今回作ったhtmlを掲載しておきます。

こちらに続きを書きました。

<html lang="en">
<head>
	<title>QUnit</title>
	<script src="./resources/jquery-latest.js"></script>
	<link rel="stylesheet" href="./resources/qunit.css" type="text/css" media="screen" />
	<script type="text/javascript" src="./resources/qunit.js"></script>
    <script type="text/javascript">
		$(document).ready(function(){
			test("equal", function(){
				var hoge = new Hoge();
				equal(hoge.add(1,2), 3);
			});
			test("deepEqual stricEqual", function(){
				var hoge = new Hoge();
				var obj = hoge.package("test1","test2")
				deepEqual(obj, {p1:"test1", p2:"test2"}); //Objectの再帰的な比較
				
				var copiedObj = obj;
				strictEqual(obj, copiedObj); //そのものかどうかの比較
			});
			test("raises", function(){
				var hoge = new Hoge();
				
				raises(hoge.throwError, Error);
			});
		});
		
		var Hoge = function(){
		};
		Hoge.prototype.add = function(param1, param2){
			return param1 + param2;
		};
		Hoge.prototype.package = function(param1, param2){
			return {p1:param1, p2:param2}
		};
		Hoge.prototype.throwError = function(){
			throw new Error();
		};
	</script>
</head>
<body>
	<h1 id="qunit-header">Test</h1>
	<h2 id="toc-6" id="qunit-banner"></h2>
	<h2 id="toc-7" id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>
</body>
</html>